<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>One day escape</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="src/css/n.min.css">
    <script src="src/js/zepto.min.js"></script>
    <script src="src/js/handlebars.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
    <script>
        (function(){
            var phoneWidth =  parseInt(window.screen.width);
            var phoneScale = phoneWidth/640;
            var isAndroid = RegExp("Android").test(navigator.userAgent);
            if (isAndroid) {
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
            }
        }());
    </script>
</head>

<body class="app" style="width: 100%;height: 100%;">

    <div class="container light-gray" style="width: 640px;margin: 0 auto;">

        <section class="loc-box">
            <div class="loc-holder">
                <a href="javascript:void(0)" class="suc hide"></a>
                <p class="fail">正在努力定位...</p>
            </div>
            <p class="loc-tip hide"><span class="red">*</span>用户位置不在活动城市中。</p>
            <h3>当前活动城市</h3>
            <ul class="city-list">
                <li><a href="main.html?city=上海">上海</a></li>
                <li><a href="main.html?city=杭州">杭州</a></li>
                <li><a href="main.html?city=苏州">苏州</a></li>
                <li><a href="main.html?city=南京">南京</a></li>
            </ul>
        </section>

    </div>

    <script>

        var cityNameLists = ['上海市', '杭州市', '苏州市', '南京市'];
        var isPromiseCity = false;

        function getLocation() {
            //判断是否支持 获取本地位置
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, handleLocationError, {
                    timeout: 8000
                });
            }
        }

        function showPosition(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var cityName = '';
            $.getJSON('http://api.map.baidu.com/geocoder/v2/?ak=IslkXnOuSDmWaSNVDkDMeMVx&callback=?&location=' + lat + ',' + lng + '&output=json&pois=1', function(res){
                cityName = res.result.addressComponent.city;
                for(var i = 0; i < cityNameLists.length; i++) {
                    if(cityNameLists[i] === cityName) {
                        isPromiseCity = true;
                        break;
                    }
                }
                var city = cityName.substring(0, cityName.length - 1);
                $('.fail').addClass('hide');
                $('.suc').html(city + '<span>GPS定位</span>').removeClass('hide');
                if(isPromiseCity) {
                    $('.suc').attr('href', 'main.html?city=' + city);
                } else {
                    $('.loc-tip').removeClass('hide');
                }
            });
        }

        function handleLocationError(error) {
            var errorText = '无法定位当前城市，请稍后尝试GPS定位';
            switch (error.code) {
                case error.TIMEOUT:
                    errorText = '连接超时，无法定位当前城市';
                    break;
                case error.PERMISSION_DENIED:
                    errorText = '您拒绝了使用位置共享服务，查询已取消';
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorText = '非常抱歉，我们暂时无法为您所在地提供位置服务';
                    break;
            }
            $('.fail').text(errorText);
        }

        Zepto(function($){

            getLocation();

        });
    </script>

</body>

</html>
